<template>
  <div>
    <div class="v-nav-bar" id="div2">
      <button class="v-nav" style="color: white;" @click.prevent="getReying(1)"
        >正在热映</button
      >&nbsp;&nbsp;
      <button to="" class="v-nav" style="color: white;" @click.passive="getReying(2)"
        >即将上映</button
      >&nbsp;&nbsp;
      <button to="" class="v-nav" style="color: white;"
        >经典影片</button
      >
    </div>
    &nbsp;&nbsp;
    <div id="div3" >
      类型： <button class="but2" @click="getAllFilm()">全部</button>
      <button class="but2" v-for="(t,index) in TypeFList" :key="index"  @click.prevent="getClass(`${t.name}`)">{{t.name}}</button>
      <!-- <button id="but2">喜剧</button>
      <button id="but2">动画</button>
      <button id="but2">剧情</button>
      <button id="but2">恐怖</button>
      <button id="but2">惊悚</button>
      <button id="but2">科幻</button>
      <button id="but2">动作</button>
      <button id="but2">悬疑</button>
      <button id="but2">犯罪</button>
      <button id="but2">冒险</button>
      <button id="but2">战争</button>
      <button id="but2">奇幻</button>
      <button id="but2">运动</button>
      <button id="but2">家庭</button>
      <button id="but2">古装</button>
      <button id="but2">武侠</button>
      <button id="but2">西部</button>
      <button id="but2">历史</button>
      <button id="but2">传记</button>
      <button id="but2">歌舞</button>
      <button id="but2">纪录片</button>
      <button id="but2">灾难</button>
      <button id="but2">青春</button>
      <button id="but2">儿童</button> -->
      <button class="but2">其他</button>
    </div>
    &nbsp;&nbsp;
    <div id="boximg">
      <div
        id="div4"
        v-for="(f, index) in FilmList"
        :key="index"
        @mouseenter="onMouseOver($event)"
        @mouseleave="onMouseOut($event)"
      >
        <img :src="`/images/${f.imgno}.jpg`" />&nbsp;&nbsp;
        <p id="tel" class="content">
          {{ f.dra }}
        </p>
        <p id="tel2">{{ f.name }}</p>
      </div>
    </div>
    <div id="div5">
      <p id="tel3">
        关于猫眼:关于我们 管理团队 投资者关系 友情链接:美团网 格瓦拉<br />
        商务合作邮箱:v@maoyan.com 客服电话:10105335 举报电话:4006018900<br />
        用户举报/涉未成年人有害举报邮箱:tousujubao@meituan.com
        舞弊线索举报邮箱:wubijubao@maoyan.com <br />
        广播电视节目制作经营许可证 京 字第08478号 网络文化经营许可证 <br />
        中华人民共和国增值电信业务经营许可证 京B2-20190350 营业性演出许可证
        <br />
        猫眼用户服务协议 猫眼平台交易规则总则 隐私政策
      </p>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Sy",
  data() {
    return {
      FilmList: [],
      TypeFList:[]
    };
  },
  created() {
    this.getAllFilm();
    this.getAllTypef()
  },
  methods: {
    getAllFilm() {
      axios.get("http://localhost:8888/AllFilm").then(({ data }) => {
        console.log(1, data);
        this.FilmList = data;
      });
    },
    getAllTypef() {
      axios.get("http://localhost:8888/alltypef").then(({ data }) => {
        console.log(2, data);
        this.TypeFList = data;
      });
    },
    onMouseOver(event) {
      $(event.target).find(".content").css("display", "block");
    },
    onMouseOut(event) {
      $(event.target).find(".content").css("display", "none");
    },
    getReying(i){
      console.log("i:",i)
      axios.get("http://localhost:8888/TimeFilm?i="+i).then(({ data }) => {
        console.log(1, data);
        this.FilmList = data;
      });
    },
    getClass(x){
      console.log("x:",x)
      axios.get("http://localhost:8888/ClassFilm?name="+x).then(({ data }) => {
        console.log(1, data);
        this.FilmList = data;
      });
    },
  },
};
</script>

<style  scoped>
#but1 {
  border: none;
  background-color: white;
}
#div1 {
  display: flex;
  padding-top: 20px;
}
#div2 {
  background-color: black;
  height: 50px;
}
.but2 {
  border: none;
  background-color: white;
}
/* #boximg {
  height: 600px;
} */
#div4 {
  display: flex;
  margin-top: 35px;
  padding: 0%;
  position: relative;
  left: 40px;
  width: 190px;
}
#tel {
  position: absolute;
  top: 141px;
  color: red;
  background-color: aqua;
  width: 160px;
  height: 66px;
  /* display: -webkit-box; */
  display: none;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

#tel2 {
  top: 210px;
  color: red;
  left: 25px;
  position: absolute;
}

#div5 {
  margin-top: 100px;
  background-color: black;
  height: 100px;
}
#tel3 {
  color: white;
  font-size: 10px;
}
#boximg {
  display: flex;
  flex-wrap: wrap;
}
.v-nav{
  background-color: black;
}
</style>